<script setup>
import { ref,shallowRef } from 'vue';
import { getWallpaper } from '../../api';
import {onLoad,onPullDownRefresh,onReachBottom} from'@dcloudio/uni-app'
import typeItemVue from '../../components/typeItem/typeItem.vue';
const typeItem = shallowRef(typeItemVue)

const n = ref(1)
let cid = ''
let title=''
const list = ref([])
const getwall = async (classid) => {
	const res = await getWallpaper({classid,n:n.value})
	list.value = [...list.value,...res.data]
	console.log(list.value)
}
onLoad((options)=>{
	getwall(options.classid)
	cid = options.classid
	title=options.title
})
onPullDownRefresh(()=>{
	n.value = 1
	list.value = []
	getwall(cid)
	setTimeout(()=>{
		uni.stopPullDownRefresh()
	},1000)
})
onReachBottom(()=>{
	n.value++
	getwall(cid)
	
})

const back = () => {
	uni.navigateBack()
}
</script>
<template>
	<view class="bar">
		<view style="height: 23px;width: 750rpx;background-color: white;"></view>
		<uni-nav-bar @clickLeft="back" left-icon="back"   :title="title" />
	</view>
	
	<view class="typelist">
		<typeItem v-for="(item,index) in list" :key="item._id" :info="item" :index="-1" :list="list" :current="index"></typeItem>
	</view>
</template>

<style lang="scss" scoped>
 .typelist {
	width: 750rpx;
	padding:120rpx 5rpx 10rpx 5rpx;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
 }
 .bar {
	 position: fixed;
	 top: 0px;
	z-index: 999;
	width: 750rpx;
 }
</style>
